import React,{useState} from 'react';
import { Form, Input, Modal,Descriptions,Badge,Button,Divider  } from 'antd';
import Nunberinput from '../../../../components/Nunberinput/Nunberinput'
const { TextArea } = Input;

const FormItem = Form.Item;

const Grade = props => {
  const [grade, setgrade] = useState({ score: "", jilu: "12",record:"22" });//修改实验成绩和记录,评价的数据

  const [form] = Form.useForm();
  const { modalVisible, onSubmit: handleAdd, onCancel } = props;
// 点击确定的时候执行这代码块
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    handleAdd(fieldsValue);
  };
  const formRef = React.createRef();
  // 这个是个在numberinput子组件调用的方法
 const  changevalue = (e) => {
  //  子组件调用这方法改变grade的值
  if (!isNaN(e)) {
    grade.score = e;
    setgrade({...grade})
    console.log(e,grade)

  }else{
    grade[e.target.name] = e.currentTarget.value;
    setgrade({...grade})
    console.log(e,grade)
  }     
  };

  return (
    <Modal
      destroyOnClose
      title="个人成绩界面"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Descriptions title="个人信息">
    <Descriptions.Item label="账号">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="姓名">1810000000</Descriptions.Item>
    <Descriptions.Item label="类型">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="学号">empty</Descriptions.Item>
    <Descriptions.Item label="年纪">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </Descriptions.Item>
    <Descriptions.Item label="班级">empty</Descriptions.Item>

  </Descriptions>
  <Descriptions title="考试信息">
    <Descriptions.Item label="考试名称">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="任课老师" span={2}>1810000000</Descriptions.Item>
    <Descriptions.Item label="实验内容">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="备注">empty</Descriptions.Item>
  
  </Descriptions>
  <Descriptions title="成绩信息">
    <Descriptions.Item label="开始时间">Zhou Maomao</Descriptions.Item>
    <Descriptions.Item label="结束时间">1810000000</Descriptions.Item>
    <Descriptions.Item label="用时">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="考试成绩"> 
    <Nunberinput
         style={{ width: 70 }}  value={grade.score} onChange={changevalue}/>
         </Descriptions.Item>
    <Descriptions.Item label="实验记录" span={2}>
    <Input placeholder="Basic usage" name='jilu' value={grade.jilu} onChange={changevalue} style={{width:180}}/>
    <Button type="primary" size='small'>保存</Button>
    </Descriptions.Item>
    <Descriptions.Item label="完成状态">empty</Descriptions.Item>
    <Descriptions.Item label="实验报告" span={2}>
    <Button type="primary" size='small'>
      {/* pdf可以直接在线预览。world是直接下载再打开 */}
      <a href="http://192.168.88.160:8000/测试bug文档.docx">预览</a>
      </Button>
    <Divider type="vertical" />
    <Button type="primary" size='small'>     
     <a href={`http://${window.location.host}/测试bug文档.docx`}>下载</a>
</Button>
    </Descriptions.Item>
    <Descriptions.Item label="教师评语" span={3}>

    <TextArea allowClear value={grade.record}  name='record' onChange={changevalue} style={{width:400,verticalAlign:'center'}}/>
   <span style={{verticalAlign:'center'}}> <Button type="primary" size='small' >保存</Button></span>
    </Descriptions.Item>
    
  </Descriptions>
    </Modal>
  );
};

export default Grade;
